<template>
    <div class="wrapper">
        <t-row :gutter="16" class="margin-bottom">
            <t-col :span="6">
                <t-card title="用户总数" :class="{ 'dashboard-item': true }">
                    <span class="home-number"> {{ total }}人</span>
                </t-card>
            </t-col>
            <t-col :span="6">
                <t-card title="今日新增用户" :class="{ 'dashboard-item': true }">
                    <span class="home-number"> {{ newUser }}人</span>
                </t-card>
            </t-col>
        </t-row>
        <t-row :gutter="16">
            <t-col :span="12">
                <t-date-picker v-model="selectedMonth" mode="month" placeholder="请选择月份" @change="handleMonthChange"
                    class="margin-bottom" />
                <t-card>
                    <div id="userUpEcharts" style="width:100%; min-height:400px;" class="margin-top">
                    </div>
                </t-card>
            </t-col>
        </t-row>
    </div>
</template>

<script setup lang="ts">
import { getTotal, getNewUserEcharts } from '@/api/home';
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const total = ref(0)
const newUser = ref(0)
const selectedMonth = ref('')

const getHomeData = async () => {
    try {
        const res = await getTotal()
        total.value = res.data.total
        newUser.value = res.data.new_user
    } catch (error) {
        console.log(error)
    }
}

const getCurrentDate = () => {
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    selectedMonth.value = `${year}-${month}`
}

const handleMonthChange = (value: string) => {
    selectedMonth.value = value;
    getEcharts();
}

const echarts_X = ref()
const echarts_Y = ref()
const getEcharts = async () => {
    try {
        const res = await getNewUserEcharts({ month: selectedMonth.value })
        echarts_X.value = res.data.dates
        echarts_Y.value = res.data.values
        renderChart();
    } catch (error) {
        console.log(error)
    }
}
const renderChart = () => {
    const chart = echarts.init(document.getElementById('userUpEcharts'))

    const option = {
        title: {
            text: '用户增长趋势图',
            subtext: '按月统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
        },
        xAxis: {
            data: echarts_X.value,
            axisLabel: {
                rotate: 45
            }
        },
        yAxis: {
            type: 'value',
            name: '新增用户数',
            min: 0,
            max: 5,
            minInterval: 1,

        },
        series: [
            {
                data: echarts_Y.value,
                type: 'line',
                smooth: true,
                name: '新增用户',
                itemStyle: {
                    color: '#36B37E'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(54, 179, 126, 0.3)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(54, 179, 126, 0.05)'
                        }
                    ])
                }
            }
        ]
    };

    chart.setOption(option);

    // 添加窗口大小改变时的自适应
    window.addEventListener('resize', () => {
        chart.resize();
    });
}

onMounted(() => {
    getCurrentDate()
    getHomeData()
    getEcharts()
});
</script>

<style scoped>
.wrapper {
    padding: 20px;
}

.home-number {
    font-size: 16px;
}

:deep(.t-card__title) {
    font-size: 14px;
    color: #666;
    font-weight: normal;
}

.dashboard-item {
    text-align: center;
}

.margin-top,
.margin-bottom {
    margin-bottom: 12px;
}
</style>
